<script setup>
import CustomizeSelect from '@/views/flow/CutomizeForm/components/customizeOption/CustomizeFormSelect.vue'
import { ElMessage } from 'element-plus';
import { watchEffect } from 'vue';
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  optionList: {
    type: Array,
    default: []
  }
})
const dialogVisible = computed(() => props.visible)
const optionList = computed(() => props.optionList)

const emit = defineEmits(['closeDialog'])
const handleClose = () => {
  selectedValue.value = ''
  emit('closeDialog')
}
const selectedValue = ref('')

const copyText = async () => {
  try {

    if (!selectedValue.value) return ElMessage.warning('请先选择表单！')
    await navigator.clipboard.writeText(selectedValue.value);
    ElMessage.success('复制成功')

  } catch (error) {
    console.log('%c [ error ]-22', 'font-size:13px; background:pink; color:#bf2c9f;', error)
    ElMessage.error('复制失败')
  }
}

watchEffect(()=>{
  
  console.log('%c [  ]-40', 'font-size:13px; background:pink; color:#bf2c9f;', props.optionList)
})

</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" title="查看表单标识key" width="500" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">
      <div class="dialog-body">
        <el-form>
          <el-form-item label='请选择表单' label-width="120">
            <CustomizeSelect filterable :optionList="optionList" v-model="selectedValue">
              <template #default="{ scope }">
                <div class="option">
                  <span class="desc">{{ scope.label }}</span>
                  <span class="key"> {{ scope.value }}</span>
                </div>
              </template>
            </CustomizeSelect>
          </el-form-item>
          <el-form-item label="表单标识key" label-width="120">
            <el-tooltip class="box-item" effect="dark" content="点击复制，粘贴到【开始】的【表单标识key】输入框中" placement="bottom">
              <el-button class="btn" type="warning" @click="copyText">{{ selectedValue || '请先选择表单！' }}</el-button>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.dialog-body {
  height: 200px;
}

.btn {
  width: 100%
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  .desc {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
  }

  .key {
    width: 80px;
    font-size: 12px;
    font-weight: 700;
    color: rgb(189, 189, 189);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
